<template>
  <el-form id="employee-add" ref="formRef" :inline="true" :model="employeeInfo" class="demo-form-inline" :rules="rules">
    <el-descriptions :column="3" border title="新增员工信息">
      <template #extra>

        <el-button type="primary" @click="handleEmployeeInfoAdd(formRef)">
          提交
        </el-button>
      </template>

      <el-descriptions-item label-align="center" label="姓名">
        <el-form-item prop="name">
          <el-input v-model="employeeInfo.name" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="身份证号码">
        <el-form-item prop="cardId">
          <el-input v-model="employeeInfo.cardId" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="学历">
        <el-form-item prop="education">
          <el-input v-model="employeeInfo.education" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="邮箱">
        <el-form-item prop="email" label="">
          <el-input v-model="employeeInfo.email" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="手机号">
        <el-form-item prop="phone">
          <el-input v-model="employeeInfo.phone" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="电话">
        <el-form-item prop="tel">
          <el-input v-model="employeeInfo.tel" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="政治面貌">
        <el-form-item prop="party">
          <el-input v-model="employeeInfo.party" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="QQ号码">
        <el-form-item prop="qqNum">
          <el-input v-model="employeeInfo.qqNum" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="联系地址">
        <el-form-item prop="address">
          <el-input v-model="employeeInfo.address" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="邮政编码">
        <el-form-item prop="postCode">
          <el-input v-model="employeeInfo.postCode" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="出生日期">
        <el-form-item prop="birthday">
          <el-date-picker v-model="employeeInfo.birthday" type="date" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="民族">
        <el-form-item prop="race">
          <el-input v-model="employeeInfo.race" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="专业">
        <el-form-item prop="speciality">
          <el-input v-model="employeeInfo.speciality" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="爱好">
        <el-form-item prop="hobby">
          <el-input v-model="employeeInfo.hobby" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="备注">
        <el-form-item prop="remark">
          <el-input v-model="employeeInfo.remark" clearable />
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="性别">
        <el-form-item>
          <el-select v-model="employeeInfo.sex" style="width: 100px;">
            <el-option label="未知" :value="0" />
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="职位">
        <el-form-item>
          <el-select v-model="employeeInfo.jobId" style="width: 150px" filterable>
            <el-option v-for="(item, key) in jobsData" :label="item.name" :key="key" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-descriptions-item>
      <el-descriptions-item label-align="center" label="部门">
        <el-form-item prop="deptId">
          <el-select  v-model="employeeInfo.deptId" style="width: 150px" filterable>
            <el-option v-for="(item, key) in depData" :label="item.name" :key="key" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, reactive } from "vue"
import { ApiPost } from '@/utils/Axios';
import { ElMessageBox, ElNotification, type FormInstance } from 'element-plus'

const employeeInfo = ref({
  id: null,
  deptId: "",
  jobId: 1,
  name: "",
  cardId: "",
  address: "",
  postCode: "",
  tel: "",
  phone: "",
  qqNum: "",
  email: "",
  sex: 0,
  party: "",
  birthday: "",
  race: "",
  education: "",
  speciality: "",
  hobby: "",
  remark: ""
})
onBeforeMount(() => {
  getDepData()
  getJobsData()
})

const formRef = ref<FormInstance>()
const depData = ref([])
const jobsData = ref([])
const getDepData = () => {
  ApiPost("/deptInf/page", {
    page: 1,
    pageSize: 1000,
  }).then(res => {
    console.log(res)
    if (res.code === 200) {
      depData.value = res.data.records
    } else {
      console.log("错误=>", res.msg);
    }
  })
}

const getJobsData = () => {
  ApiPost("/jobInf/page", {
    page: 1,
    pageSize: 1000,
  }).then(res => {
    if (res.code === 200) {
      jobsData.value = res.data.records
    } else {
      console.log("错误=>", res.msg);
    }
  })
}

const rules = reactive({
  name: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('姓名不能为空'))
      } else {
        callback()
      }
    }
  }],
  cardId: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('身份证号码不能为空'))
      } else {
        callback()
      }
    }
  }],
  address: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('联系地址不能为空'))
      } else {
        callback()
      }
    }
  }],
  postCode: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('邮政编码不能为空'))
      } else {
        callback()
      }
    }
  }],
  tel: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('电话号码不能为空'))
      } else {
        callback()
      }
    }
  }],
  phone: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('手机号码不能为空'))
      } else {
        callback()
      }
    }
  }],
  deptId: [{
    trigger: 'change', validator: (rule: any, value: any, callback: any) => {
      console.log("部门不能为空",value)
      if (value === '') {
       
        callback(new Error('部门不能为空'))
      } else {
        callback()
      }
    }
  }],
  qqNum: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('QQ号码不能为空'))
      } else {
        callback()
      }
    }
  }],
  email: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('电子邮箱不能为空'))
      } else {
        callback()
      }
    }
  }],
  party: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('政治面貌不能为空'))
      } else {
        callback()
      }
    }
  }],
  birthday: [{
    trigger: 'change', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('出生日期不能为空'))
      } else {
        callback()
      }
    }
  }],
  race: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('民族不能为空'))
      } else {
        callback()
      }
    }
  }],
  education: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('学历不能为空'))
      } else {
        callback()
      }
    }
  }],
  speciality: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('专业不能为空'))
      } else {
        callback()
      }
    }
  }],
  remark: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('备注不能为空'))
      } else {
        callback()
      }
    }
  }],
  hobby: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('兴趣不能为空'))
      } else {
        callback()
      }
    }
  }],
})

const handleEmployeeInfoAdd = (formEl: FormInstance | undefined) => {
  formEl.validate(vail => {
    if (vail) {
      ElMessageBox({
        title: "提醒",
        type: "warning",
        message: "确认新增该员工信息吗？",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showCancelButton: true,
      }).then(() => {
        console.log("确认新增",employeeInfo)
        ApiPost("/employeeInf/add", { ...employeeInfo.value,birthday:employeeInfo.value.birthday.toString() }).then(res => {
          console.log(res)
          if (res.code === 200) {
            ElNotification({
              title: "添加成功",
              type: "success",
              showClose: false,
              duration: 2000,
            })
          }
        })
      }).catch(() => {
        return
      })
    }
  })

}
</script>

<style scoped>
#employee-add .el-form-item {
  margin: 0 !important;
  width: 100% !important;
}
</style>